<template>
    <el-drawer
        size="30%"
        v-model="drawer"
        :title="'添加用户'"
        direction="rtl"
        :before-close="closeDrawer">
    <el-form
          size="small"
          ref="formRef"
          style="max-width: 600px"
          :model="formData"
          status-icon
          :rules="rules"
          label-width="60px"
      >
      <el-form-item label="姓名" prop="name" >
          <el-input v-model="formData.name" style="width: 300px;" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
          <el-input v-model="formData.phone" style="width: 300px;" />
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="formData.idCard" style="width: 300px;" />
      </el-form-item>
      <el-form-item label="住址" prop="userAddress">
          <el-input v-model="formData.userAddress" style="width: 300px;" />
      </el-form-item>
      <el-form-item label="角色" prop="roleId">
          <el-select v-model="formData.roleId" placeholder="请选择角色">
            <el-option
          v-for="item in roleList"
          :key="item.id"
          :label="item.roleName"
          :value="item.id"
            /> 
          </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="formData.sex" style="width: 300px;">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
      </el-radio-group>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)">添加</el-button>
          <el-button @click="resetForm(formRef)">取消</el-button>
      </el-form-item>
    
    </el-form>
    </el-drawer>
    <el-drawer
        size="30%"
        v-model="drawer2"
        :title="'修改员工'"
        direction="rtl"
        :before-close="closeDrawer2">
            <el-form
            size="small"
            ref="formRef2"
            style="max-width: 600px"
            :model="formData2"
            status-icon
            :rules="rules"
            label-width="60px"
        >

    <el-form-item v-if="false" label="id" prop="id" >
        <el-input  v-model="formData2.id"  style="width: 300px;"  type="password"/>
    </el-form-item>
    <el-form-item label="姓名" prop="name"  >
        <el-input v-model="formData2.name" style="width: 300px;" disabled/>
    </el-form-item>
    <el-form-item label="角色" prop="roleId">
        <el-select v-model="formData2.roleId" placeholder="请选择角色">
          <el-option
        v-for="item in roleList"
        :key="item.id"
        :label="item.roleName"
        :value="item.id"
          /> 
        </el-select>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="submitForm2(formRef2)">{{'修改'}}</el-button>
        <el-button @click="resetForm2(formRef2)">取消</el-button>
    </el-form-item>
    
    </el-form>
    </el-drawer>
    <el-drawer
        size="30%"
        v-model="drawer3"
        :title="'员工详情'"
        direction="rtl"
        :before-close="closeDrawer3">
            <el-form
            size="small"
            ref="formRef3"
            style="max-width: 600px"
            :model="formData3"
            status-icon
            :rules="rules"
            label-width="60px"
        >

   
    <el-form-item label="姓名" prop="name" >
        <el-input v-model="formData3.name" style="width: 300px;" disabled/>
    </el-form-item>
    <el-form-item label="手机号" prop="phone">
        <el-input v-model="formData3.phone" style="width: 300px;" disabled/>
    </el-form-item>
    <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="formData3.idCard" style="width: 300px;" disabled/>
    </el-form-item>
    <el-form-item label="住址" prop="userAddress">
        <el-input v-model="formData3.userAddress" style="width: 300px;" disabled/>
    </el-form-item>
    <el-form-item label="角色" prop="roleId">
        <el-select v-model="formData3.roleId" placeholder="请选择角色" disabled>
          <el-option
        v-for="item in roleList"
        :key="item.id"
        :label="item.roleName"
        :value="item.id"
          /> 
        </el-select>
    </el-form-item>
    <el-form-item label="性别" prop="sex" >
        <el-radio-group v-model="formData3.sex" style="width: 300px;" disabled>
          <el-radio label="1" :value="1">男</el-radio>
          <el-radio label="0" :value="0">女</el-radio>
        </el-radio-group>
    </el-form-item>
    <el-form-item label="办理人" prop="createName">
        <el-input v-model="formData3.createName" style="width: 300px;" disabled/>
    </el-form-item>
    <el-form-item label="入职时间" prop="entryTime" >
         <el-date-picker
          v-model="formData3.entryTime"
          type="date"
          aria-label="Pick a date"
          placeholder="Pick a date"
          style="width: 100%"
          disabled
        />
    </el-form-item>
    <el-form-item label="更新人" prop="handleName">
        <el-input v-model="formData3.handleName" style="width: 300px;" disabled/>
    </el-form-item>
    <el-form-item label="离职时间" prop="handleName">
         <el-date-picker
          v-model="formData3.handleName"
          type="date"
          aria-label="Pick a date"
          placeholder="Pick a date"
          style="width: 100%"
          disabled
        />
    </el-form-item>
    
    </el-form>
    </el-drawer>

</template>

<script setup lang="ts">
import { ElNotification } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ref,reactive ,onMounted} from "vue";
import {$roleList} from '../../api/role.ts'
import {$add,$update} from '../../api/admin.ts'

const emit = defineEmits(['sync-list'])

//抽屉变量
const drawer = ref(false)
const drawer2 = ref(false)
const drawer3 = ref(false)
//关闭抽屉
const closeDrawer = () =>{
    drawer.value =false
    //重置表单
    formRef.value?.resetFields()
    //清空表单
    formData.value = {
      name:'',
      phone:'',
      idCard:'',
      userAddress:'',
      sex:'',
      roleId:'',
    }
}
//关闭抽屉2
const closeDrawer2 = () =>{
    drawer2.value =false
    //重置表单
    formRef2.value?.resetFields()
    // 清空表单
    formData2.value = {
      name:'',
      roleId:'',
    }
}
const closeDrawer3 = () =>{
    drawer3.value =false
    //重置表单
    formRef2.value?.resetFields()
    
}

const formRef = ref<FormInstance>()

//表单数据
const formData = ref({
    name:'',
    phone:'',
    idCard:'',
    userAddress:'',
    sex:'',
    roleId:'',
})
const formRef2 = ref<FormInstance>()
const formData2 = ref({
  name:'',
  roleId:'',
})

const formRef3 = ref<FormInstance>()
const formData3 = ref({
    name:'',
    sex:'',
    phone:'',
    idCard:'',
    userAddress:'',
    roleId:'',
    createName:'',
    entryTime:'',
    handleName:'',
    leaveTime:''
})



//验证角色名称
const validateName = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入员工名称'))
  } else {
    callback()
  }
}
const validatePhone = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入手机号'))
  } // 使用正则表达式验证手机号格式
  else if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error('请输入有效的手机号'))
  }
  else {
    callback()
  }
}
const validateuserAddress= (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入员工住址'))
  } else {
    callback()
  }
}

const validateRoleId = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请选择角色'))
  } else {
    callback()  // 验证通过
  }
}

const validateSex = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请勾选性别'))
  } else {
    callback()  // 验证通过
  }
}

const validateIdCard = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入身份证'));
  } else {
    // 正则表达式：匹配15位或18位的身份证号码，18位可能以字母X结尾
    const idCardPattern = /^(?:\d{15}|\d{17}[\dXx])$/;
    
    if (!idCardPattern.test(value)) {
      callback(new Error('请输入有效的身份证号码'));
    } else {
      callback(); // 校验通过
    }
  }
}

//验证对象
const rules = reactive<FormRules<typeof formData>>({
  name: [{ validator: validateName, trigger: 'blur' }],
  phone: [{ validator: validatePhone, trigger: 'blur' }],
  idCard: [{ validator: validateIdCard, trigger: 'blur' }],
  roleId: [{ validator: validateRoleId, trigger: 'change' }],
  userAddress: [{ validator: validateuserAddress, trigger: 'blur' }],
  sex: [{ validator: validateSex, trigger: 'blur' }]
})

//角色列表
let roleList = ref([])

//加载角色列表
const loadRoleList = async()=>{
   roleList.value = await $roleList();
  //  roleList.value = data.t; // 确保 data 结构正确
    // roles.value = data.t
}

onMounted(()=>{
    loadRoleList()
})


const submitForm2 = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {let ret = await $update(formData2.value)
        if (ret.code === 2001) {
          ElNotification({
            title: '成功！',
            message: '员工更新成功！',
            type: 'success',
          })
          //通知父组件更新列表
          emit('sync-list')
          //重置表单
          // formRef2.value?.resetFields()
        }else{
          ElNotification({
            title: '失败',
            message: '请联系管理员',
            type: 'error',
          })
        }
      
    }else {
      console.log('error submit!')
    }
  })
}

//提交表单
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return

  formEl.validate(async (valid) => {
    
    if (valid) {
      let ret = await $add(formData.value)
        if (ret.code === 2001) {
          ElNotification({
            title: '成功！',
            message: '员工新增成功！',
            type: 'success',
          })
          //通知父组件更新列表
          emit('sync-list')
          //重置表单
          formRef.value?.resetFields()
        }else{
          ElNotification({
            title: '失败',
            message: '请联系管理员',
            type: 'error',
          })
        }
      
    }else {
      console.log('error submit!')
    }
  })
}

//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
   //清空表单
    formData.value = {
      name:'',
      phone:'',
      idCard:'',
      userAddress:'',
      sex:'',
      roleId:''
    }
}

const resetForm2 = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
   //清空表单
   formData2.value.roleId = ''
}



//暴露成员
defineExpose({
    drawer,
    drawer2,
    drawer3,
    formData,
    formData2,
    formData3
})

</script>

<style lang="scss" scoped>

</style>